screen : "light" and "dark" mode - 4

revision : April 26, 2025

use light-dark()

code:
      <div id="one">
        <div class="two">
          <button class="btn" id="lightSwitch" type="button" onclick="switchLight()">Light</button>
          <button class="btn" id="darkSwitch" type="button" onclick="switchDark()">Dark</button>
          <button class="btn" id="autoSwitch" type="button" onclick="switchAuto()">Auto</button>
        </div>
        <h3>The color scheme is </h3>
        <div class="two">
            My color scheme is always dark.
        </div>
        <h4>Or choose vastly different schemes for light and dark modes!</h4>
        <p><b>Look at it gooo!</b></p>
      </div>
      <style>
        #one{--black: oklch(0% 0 0); --white: oklch(100% 0 0); color-scheme: light dark; --background: light-dark(var(--white), var(--black)); --text: light-dark(var(--black), var(--white));}
        #one {background-color: var(--background); color: var(--text);}
        div.two {color-scheme: dark; background-color: var(--background); color: var(--text); }
        #one p {color: light-dark(DarkGreen, Lavender); background-color: light-dark(Pink, SaddleBrown); padding: 1em;}
        #one > h3 {--scheme: "light";}
        #one > h3::after {content: var(--scheme);}
        @media (prefers-color-scheme: dark) {
          h3 {--scheme: "dark";}
        }
    </style>
    <script>
        const one = document.querySelector('#one');
        function switchDark() {
          one.style.setProperty("color-scheme", "dark");
        }
        function switchLight() {
          one.style.setProperty("color-scheme", "light");
        }
        function switchAuto() {
          one.style.setProperty("color-scheme", "light dark");
        }
        </script>
    

use color-mix()

code:
      <div id="three" style="color-scheme: light dark">
        <div class="three">
          <button class="btn-1" id="lightSwitch1" type="button" onclick="switchLight1()">Light</button>
          <button class="btn-1" id="darkSwitch1" type="button" onclick="switchDark1()">Dark</button>
          <button class="btn-1" id="autoSwitch1" type="button" onclick="switchAuto1()">Auto</button>
          <label for="hueSlider">  Hue:</label> 
          <input id="hueSlider" type="range" min="0" max="360" value="222">
        </div>
        <div class="three">Theme color,
              <br><div class="oklch"></div> in OKLCH color space 
              <br><div class="hsl"></div> in HSL color space
        </div>
        <p class="oklch">Here's some themed text in a themed box :) (OKLCH)</p>
        <p class="hsl">Here's some themed text in a themed box :) (HSL)</p>
      </div>
    <style>
        #three {color: CanvasText;background-color: Canvas; padding: 1rem;--theme-oklch: oklch(50% 0.25 var(--hue, 222)); --theme-hsl: hsl(var(--hue, 222) 75% 50%);}
        #three > div {margin-block: 1rem 0;}
        .three > div{display: inline-block; width: 2rem; height: 1rem;border: 1px solid;}
            div.oklch {background-color: var(--theme-oklch);}
            div.hsl {background-color: var(--theme-hsl);}
            p:not(.date) {padding: 1rem;} 
            p.oklch {color: color-mix(in oklab, CanvasText 75%, var(--theme-oklch)); background-color: color-mix(in oklab, Canvas 75%, var(--theme-oklch));}
            p.hsl {color: color-mix(in oklab, CanvasText 75%, var(--theme-hsl));background-color: color-mix(in oklab, Canvas 75%, var(--theme-hsl));}
        </style>
    </style>
    <script>
            const three = document.querySelector('#three');
            const hueSlider = document.querySelector('#hueSlider');
  
            function switchDark1() {
              three.style.setProperty("color-scheme", "dark");
            }
            function switchLight1() {
               three.style.setProperty("color-scheme", "light");
            }
            function switchAuto1() {
               three.style.setProperty("color-scheme", "light dark");
            }
  
            hueSlider.addEventListener("input", () =>
              three.style.setProperty("--hue", hueSlider.value));
  
            
        </script>